<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<body>
    <script type="text/javascript">
        window.onload = function() {

            function formCheck() {
                var password1 = document.getElementById("password1").value;
                var password2 = document.getElementById("password2").value;
                if(password1 == password2) {
                    document.getElementById("register").type = "submit";
                    document.getElementById("passwordCheckInfo").innerText = "";
                } else {
                    document.getElementById("register").type = "button";
                    document.getElementById("passwordCheckInfo").innerText = "再次密码不一致！";
                }
            }
            document.getElementById("password1").onkeyup = formCheck;
            document.getElementById("password2").onkeyup = formCheck;
        }
    </script>
    <form action="https://www.baidu.com/">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" 
        required maxlength="15" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,14}$" 
        title="用户名由5-15位字母、数字、下划线组成，必须字母开头"><br>
        <label for="password1">密码：</label>
        <input type="password" name="password" id="password1"
        required maxlength="16" pattern="^[a-zA-Z][a-zA-Z0-9_]{5,15}$"
        title="密码由6-16位字母、数字、下划线组成，必须字母开头"><br>
        <label for="password2">密码确认：</label>
        <input type="password" id="password2"><span id="passwordCheckInfo"></span><br>
        <button type="submit" id="register">注册</button>
    </form>
</body>
</html>

![](https://gitee.com/huanyv/imgbed/raw/master/img/20220326115001.png)